<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CLEAN MARKUP = GOOD KARMA.
      Hi source code lover,

      you're a curious person and a fast learner ;)
      Let's make something beautiful together. Contribute on Github:
      https://github.com/webslides/webslides

      Thanks!
    -->

    <!-- SEO -->
    <title>WebSlides Tutorial: Videos, Images, and Maps</title>
    <meta name="description" content="How to embed images, videos, and maps in your presentation.">

    <!-- URL CANONICAL -->
    <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">

    <!-- CSS Base -->
    <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">

    <!-- Optional - CSS SVG Icons (Font Awesome) -->
    <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">

    <!-- SOCIAL CARDS (ADD YOUR INFO) -->

    <!-- FACEBOOK -->
    <meta property="og:url" content="/" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="WebSlides Tutorial: Media" />

    <!-- EDIT -->
    <meta property="og:description" content="How to embed images, videos, and maps in your presentation.">

    <!-- EDIT -->
    <meta property="og:updated_time" content="2017-01-04T17:25:31">

    <!-- EDIT -->
    <meta property="og:image" content="../static/images/share-webslides.jpg" >

    <!-- EDIT -->

    <!-- TWITTER -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@webslides">

    <!-- EDIT -->
    <meta name="twitter:creator" content="@jlantunez">

    <!-- EDIT -->
    <meta name="twitter:title" content="WebSlides Tutorial: Media">

    <!-- EDIT -->
    <meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">

    <!-- EDIT -->
    <meta name="twitter:image" content="../static/images/share-webslides.jpg">

    <!-- EDIT -->

    <!-- FAVICONS -->
    <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
    <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
    <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
    <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
    <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
    <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
    <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">

    <!-- Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#333333">

  </head>
  <body>
    <header role="banner">
      <nav role="navigation">
        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
        <ul>
          <li class="github">
            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
              <svg class="fa-github">
                <use xlink:href="#fa-github"></use>
              </svg>
              <em>WebSlides</em>
            </a>
          </li>
          <li class="twitter">
            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
              <svg class="fa-twitter">
                <use xlink:href="#fa-twitter"></use>
              </svg>
              <em>@WebSlides</em>
            </a>
          </li>
          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
        </ul>
      </nav>
    </header>

    <main role="main">
      <article id="webslides">

        <!-- Quick Guide
          - Each parent <section> in the <article id="webslides"> element is an individual slide.
          - Vertical sliding = <article id="webslides" class="vertical">
          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
        -->

        <section class="bg-black-blue aligncenter">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap">
            <p class="text-subtitle">WebSlides Tutorial</p>
            <h1 class="text-landing">Media</h1>
            <p class="text-symbols">* * *</p>
            <p>
              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
                <svg class="fa-github">
                  <use xlink:href="#fa-github"></use>
                </svg>
                Free Download
              </a>
            </p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="aligncenter">
          <div class="wrap">
            <h2><strong>A quick reference guide for beginners</strong></h2>
            <p class="text-intro">Videos, images, maps, and charts.</p>
            <ul class="flexblock border">
              <li>
                <!--div required = padding li or li>a-->
                <div>
                  <h3><a target="_blank" href="#slide=3">Images</a></h3>
                  <ol>
                    <li><a target="_blank" href="#slide=4">Background Images</a></li>
                    <li><a target="_blank" href="#slide=9">Overlays (light and dark)</a></li>
                    <li><a target="_blank" href="#slide=11">500+ SVG Icons</a></li>
                    <li><a target="_blank" href="#slide=13">Logos</a></li>
                    <li><a target="_blank" href="#slide=14">Avatars</a></li>
                    <li><a target="_blank" href="#slide=15">Devices</a></li>
                    <li><a target="_blank" href="#slide=16">Screenshots</a></li>
                  </ol>
                </div>
              </li>
              <li>
                <!--div required = padding li or li>a-->
                <div>
                  <h3><a target="_blank" href="#slide=17">Videos</a></h3>
                  <ol>
                    <li><a target="_blank" href="#slide=18">Background Videos (hosted & overlay)</a></li>
                    <li><a target="_blank" href="#slide=22">Embedding YouTube videos</a></li>
                    <li><a target="_blank" href="#slide=24">Fullscreen YouTube videos</a></li>
                    <li>
                      <a target="_blank" href="#slide=26"><strong>YouTube API:</strong></a>
                      <ol>
                        <li><a target="_blank" href="#slide=27">Autoplay, loop, mute, and no controls</a></li>
                        <li><a target="_blank" href="#slide=30">Fullscreen video</a></li>
                        <li><a target="_blank" href="#slide=32">Background video with overlay</a></li>
                      </ol>
                    </li>
                  </ol>
                </div>
              </li>
              <li>
                <!--div required = padding li or li>a-->
                <div>
                  <h3><a target="_blank" href="#slide=34">Maps & Charts</a></h3>
                  <ol>
                    <li><a target="_blank" href="#slide=35">Embedding maps</a></li>
                    <li><a target="_blank" href="#slide=36">Embedding the map in a card</a></li>
                    <li><a target="_blank" href="#slide=37">Fullscreen maps</a></li>
                    <li><a target="_blank" href="#slide=38">Embedding charts</a></li>
                  </ol>
                </div>
              </li>
            </ul>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap aligncenter">
            <h3>
              <svg class="fa-camera">
                <use xlink:href="#fa-camera"></use>
              </svg>
              Insert images wherever you want
            </h3>
            <p class="text-intro">15 different positions.</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <h3>15 Different Backgrounds</h3>
            <ul class="text-cols">
              <li><strong>.background</strong> (fullscreen)</li>
              <li>.background-top (cover)</li>
              <li>.background-bottom (cover)</li>
              <li>.background.light (opacity)</li>
              <li>.background.dark (opacity)</li>
              <li>.background-center</li>
              <li>.background-center-top</li>
              <li>.background-center-bottom</li>
              <li>.background-left</li>
              <li>.background-left-top</li>
              <li>.background-left-bottom</li>
              <li>.background-right</li>
              <li>.background-right-top</li>
              <li>.background-right-bottom</li>
              <li>.background-anim (animated)</li>
            </ul>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap size-50">
            <h4>
              <svg class="fa-camera">
                <use xlink:href="#fa-camera"></use>
              </svg>
              .background = Fullscreen Backgrounds
            </h4>
            <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p>
            <pre>&lt;section&gt;
  &lt;span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"&gt;&lt;/span&gt;
  &lt;div class="wrap"&gt;
    &lt;h1&gt;Slide&lt;/h1&gt;
  &lt;/div&gt;
&lt;/section&gt;</pre>
            <p>
              <svg class="fa-info">
                <use xlink:href="#fa-info"></use>
              </svg>
              Position .background outside of .wrap container.
            </p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
          <div class="wrap">
            <div class="content-left">
              <h3>.background-(position)</h3>
              <p><code>.background-right-bottom</code></p>
              <ul class="flexblock specs">
                <li>
                  <div>
                    <svg class="fa-wifi">
                      <use xlink:href="#fa-wifi"></use>
                    </svg>
                    <h2>Ultra-Fast WiFi</h2>
                    Simple and secure file sharing.
                  </div>
                </li>
                <li>
                  <div>
                    <svg class="fa-battery-full">
                      <use xlink:href="#fa-battery-full"></use>
                    </svg>
                    <h2>All day battery life</h2>
                    Your battery worries may be over.
                  </div>
                </li>
                <li>
                  <div>
                    <svg class="fa-life-ring">
                      <use xlink:href="#fa-life-ring"></use>
                    </svg>
                    <h2>Lifetime Warranty </h2>
                    We'll fix it or if we can't, we'll replace it.
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
          <div class="wrap">
            <div class="content-right">
              <h3>.background-(position)</h3>
              <p><code>.background-left-bottom</code></p>
              <ul class="flexblock specs">
                <li>
                  <div>
                    <svg class="fa-wifi">
                      <use xlink:href="#fa-wifi"></use>
                    </svg>
                    <h2>Ultra-Fast WiFi</h2>
                    Simple and secure file sharing.
                  </div>
                </li>
                <li>
                  <div>
                    <svg class="fa-battery-full">
                      <use xlink:href="#fa-battery-full"></use>
                    </svg>
                    <h2>All day battery life</h2>
                    Your battery worries may be over.
                  </div>
                </li>
                <li>
                  <div>
                    <svg class="fa-life-ring">
                      <use xlink:href="#fa-life-ring"></use>
                    </svg>
                    <h2>Lifetime Warranty </h2>
                    We'll fix it or if we can't, we'll replace it.
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="aligncenter bg-black">
          <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap">
            <h2>.background.anim</h2>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="bg-black aligncenter">
          <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
          <div class="wrap size-50">
            <h1 class="text-landing text-shadow">Opacity</h1>
            <p><code>[class*="bg-"] > .background.light</code></p>
            <pre>&lt;section class="bg-black"&gt;
  &lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
  &lt;div class="wrap"&gt;
    &lt;h1&gt;Slide&lt;/h1&gt;
  &lt;/div&gt;
&lt;/section&gt;</pre>
          </div>
        </section>
        <section class="bg-black aligncenter">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso')"></span>
          <div class="wrap size-50">
            <h1 class="text-landing text-shadow">Opacity</h1>
            <p><code>[class*="bg-"] > .background.dark</code></p>
            <pre>&lt;section class="bg-black"&gt;
  &lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
  &lt;div class="wrap"&gt;
    &lt;h1&gt;Slide&lt;/h1&gt;
  &lt;/div&gt;
&lt;/section&gt;</pre>
          </div>
        </section>
        <section>
          <div class="wrap size-50">
            <p class="text-subtitle">Optional &middot; 500+ icons</p>
            <h2>
              <a href="http://fontawesome.io/icons/">
                <svg class="fa-flag">
                  <use xlink:href="#fa-flag"></use>
                </svg>
                Font Awesome
              </a>
              as SVG icons
            </h2>
            <pre>&lt;svg class="fa-flag"&gt;
	&lt;use xlink:href="#fa-flag"&gt;&lt;/use&gt;
&lt;/svg&gt;</pre>
            <p>How to change icons?</p>
            <ol class="text-cols">
              <li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
              <li>Create a free account.</li>
              <li>Select new icons.</li>
              <li>Publish as SVG sprite.</li>
              <li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
            </ol>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="bg-green">
          <div class="wrap">
            <h3>ul.flexblock.metrics.border</h3>
            <!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
            <ul class="flexblock metrics border">
              <li> Founded
                <span>2024</span>
              </li>
              <li>
                <span>
                  <svg class="fa-users">
                    <use xlink:href="#fa-users"></use>
                  </svg>
                </span>
                24M Subscribers
              </li>
              <li>
                <span>
                  <svg class="fa-line-chart">
                    <use xlink:href="#fa-line-chart"></use>
                  </svg>
                </span>
                Revenue: $16M
              </li>
              <li>
                Monthly Growth
                <span>64%</span>
              </li>
              <li>
                <span>
                  <svg class="fa-building-o">
                    <use xlink:href="#fa-building-o"></use>
                  </svg>
                </span>
                8 Offices
              </li>
              <li>
                <span>
                  <svg class="fa-smile-o">
                    <use xlink:href="#fa-smile-o"></use>
                  </svg>
                </span>
                48 Employees
              </li>
              <li>
                <span>
                  <svg class="fa-usd">
                    <use xlink:href="#fa-usd"></use>
                  </svg>
                </span>
                EBITDA: $2,4M
              </li>
              <li>
                <span>
                  <svg class="fa-university">
                    <use xlink:href="#fa-university"></use>
                  </svg>
                </span>
                Bank: $32M
              </li>
            </ul>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <h2>Transparent Logos</h2>
            <p>
              Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
            </p>
            <hr>
            <ul class="flexblock blink">
              <li>
                <a href="#" title="Block Link = .blink">
                  <div>
                    <img src="../static/images/logos/google.svg" alt="Google">
                    <p><strong>Height recommended</strong>: 48px</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" title="Block Link = .blink">
                  <div>
                    <img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
                    <p><code>img.blacklogo</code></p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" title="Block Link = .blink">
                  <div>
                    <img class="graylogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
                    <p><code>img.graylogo</code></p>
                  </div>
                </a>
              </li>
              <li class="bg-blue">
                <a href="" title="Block Link = .blink">
                  <div>
                    <img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
                    <p><code>img.whitelogo</code></p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <!--.wrap = container (width: 90%) -->
          <div class="wrap">
            <blockquote class="text-quote">
              <p>An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism.</p>
              <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
            </blockquote>
            <hr>
            <p><code>img[class*="avatar-"]</code> (80, 72, 64, 56, 48, and 40).</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <div class="grid vertical-align">
              <div class="column">
                <h2>Devices</h2>
                <ul class="flexblock specs">
                  <li>
                    <div>
                      <svg class="fa-wifi">
                        <use xlink:href="#fa-wifi"></use>
                      </svg>
                      <h2>Ultra-Fast WiFi</h2>
                      Simple and secure file sharing.
                    </div>
                  </li>
                  <li>
                    <div>
                      <svg class="fa-battery-full">
                        <use xlink:href="#fa-battery-full"></use>
                      </svg>
                      <h2>All day battery life</h2>
                      Your battery worries may be over.
                    </div>
                  </li>
                  <li>
                    <div>
                      <svg class="fa-life-ring">
                        <use xlink:href="#fa-life-ring"></use>
                      </svg>
                      <h2>Lifetime Warranty </h2>
                      We'll fix it or if we can't, we'll replace it.
                    </div>
                  </li>
                </ul>
              </div>
              <!-- end .column-->
              <div class="column">
                <figure>
                  <img class="aligncenter" src="../static/images/iphone.png" alt="iPhone">
                </figure>
              </div>
              <!-- end .column-->
            </div>
            <!-- end .grid-->
          </div>
          <!-- end .wrap-->
        </section>
        <section>
          <div class="wrap">
            <div class="content-left">
              <figure class="browser">
                <img alt="Screenshot" src="https://webslides.tv/static/images/cover-apple.jpg">
              </figure>
            </div>
            <!-- .end .content-left -->
            <div class="content-left">
              <h2>Screenshots</h2>
              <p>HTML/CSS Browser.</p>
              <pre>&lt;figure class="browser"&gt;
  &lt;img alt="Screenshot" src="image.jpg"&gt;
&lt;/figure&gt;</pre>
            </div>
            <!-- .end .content-left -->
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="bg-blue">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
          <!-- background with a frame frame -->
          <span class="background frame"></span>
          <div class="wrap aligncenter">
            <h2>
              Videos
            </h2>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap size-60">
            <h3>Background videos</h3>
            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
  &lt;div class="embed"&gt;
    &lt;video autoplay loop poster="image.jpg"&gt;
      &lt;source src="video.mp4" type="video/mp4"&gt;
    &lt;/video&gt;
  &lt;/div&gt;
<strong>&lt;/section&gt;</strong>
</pre>
            <p>.fullscreen > .embed (responsive) > video</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="fullscreen aligncenter">
          <div class="embed">
            <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
            </video>
          </div>
        </section>
        <section>
          <div class="wrap size-60">
            <h3>Background videos</h3>
            <p>Transparent overlay:</p>
            <pre><strong>&lt;section class="fullscreen bg-blue"&gt;</strong>
  &lt;div class="embed <strong>dark</strong>"&gt;
    &lt;video autoplay muted loop poster="image.jpg"&gt;
      &lt;source src="video.mp4" type="video/mp4"&gt;
    &lt;/video&gt;
  &lt;/div&gt;
<strong>&lt;/section&gt;</strong>
</pre>
            <p>.fullscreen.bg-blue > .embed.dark (or .light) > video</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="fullscreen bg-blue aligncenter">
          <div class="embed dark">
            <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
            </video>
          </div>
          <!-- .end .embed -->
          <div class="wrap">
            <h2><strong>Muted</strong></h2>
            <p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <div class="content-left">
              <h3>Responsive Videos</h3>
              <p>Just copy and paste the code from YouTube to your slide.</p>
              <pre>&lt;div class="embed"&gt;
 <strong>&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
 &lt;/iframe&gt;</strong>
&lt;/div&gt;</pre>
              <p><code>.embed</code> (responsive)</p>
            </div>
            <!-- end .content-left -->
            <div class="content-left">
              <!-- <div class="embed"> = Responsive -->
              <div class="embed">
                <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
              </div>
              <!-- end .embed -->
            </div>
            <!-- end .content-left -->
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap size-60">
            <!-- Responsive video/iframe... Add <div class="embed"> -->
            <div class="embed">
              <iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
            </div>
            <!-- .end .embed -->
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap size-60">
            <h3>Fullscreen YouTube Video</h3>
            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
  &lt;div class="embed"&gt;
    &lt;iframe src="https://www.youtube.com/embed/iY05U7GaU5I"&gt;
    &lt;/iframe&gt;
  &lt;/div&gt;
<strong>&lt;/section&gt;</strong>
</pre>
            <p><code>.fullscreen</code> > <code>.embed</code> (responsive)</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="fullscreen">
          <!-- Fullscreen Video -->
          <div class="embed">
            <iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe>
          </div>
          <!-- .end .embed -->
        </section>
        <section class="frame">
          <p class="aligncenter">
            <svg class="fa-thumbs-up large">
              <use xlink:href="#fa-thumbs-up"></use>
            </svg>
          </p>
          <div class="wrap size-60 bg-white">
            <h3>
              <a href="https://developers.google.com/youtube">
                <svg class="fa-youtube">
                  <use xlink:href="#fa-youtube"></use>
                </svg>
                YouTube API
              </a>
            </h3>
            <p class="text-intro">Embed videos with <strong>loop, autoplay, and muted</strong> attributes. The video will automatically play when the slide is loaded.</p>
            <p><strong>You should use a local or a remote server</strong> since the YouTube API doesn't seem to work nicely when using the file directly on the browser.</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <h3>
              <svg class="fa-youtube">
                <use xlink:href="#fa-youtube"></use>
              </svg>
              YouTube API Parameters
            </h3>
            <p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
            <hr>
            <div class="grid">
              <div class="column">
                <pre>&lt;div class="embed"&gt;
  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt;
  &lt;/div&gt;</strong>
&lt;/div&gt;</pre>
                <p>autoplay + loop</p>
              </div>
              <!-- .end .column -->
              <div class="column">
                <pre>&lt;div class="embed"&gt;
  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt;
  &lt;/div&gt;</strong>
&lt;/div&gt;</pre>
                <p>autoplay + mute + no controls.</p>
              </div>
              <!-- .end .column -->
            </div>
            <!-- .end .grid -->
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <div class="content-left">
              <h3>YouTube API</h3>
              <p><code>autoplay + loop</code></p>
              <pre>&lt;div class="embed"&gt;
  &lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
            </div>
            <!-- end .content-left -->
            <div class="content-left">
              <!-- <div class="embed"> = Responsive -->
              <div class="embed">
                <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
              </div>
              <!-- end .embed -->
            </div>
            <!-- end .content-left -->
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="frame">
          <div class="wrap size-60 bg-white">
            <h3>
              <svg class="fa-info-circle large">
                <use xlink:href="#fa-info-circle"></use>
              </svg>
              <strong>Autoplay Feature</strong>
            </h3>
            <p class="text-intro">Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap size-70">
            <h3><strong>Let's make some magic with the YouTube API</strong></h3>
            <p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
            <hr>
            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
  &lt;div class="embed"&gt;
    &lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&lt;/div&gt;
  &lt;/div&gt;
<strong>&lt;/section&gt;</strong>
</pre>
            <p>The video will automatically play when the slide is loaded.</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="fullscreen">
          <!-- Fullscreen Video -->
          <div class="embed">
            <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
          </div>
          <!-- .end .embed -->
        </section>
        <section>
          <div class="wrap size-70">
            <h3><strong>Fullscreen YouTube video background</strong></h3>
            <p>Overlaying a transparent background on an embedded Youtube video:</p>
            <hr>
            <pre><strong>&lt;section class="fullscreen bg-black"&gt;</strong>
  &lt;div class="embed dark"&gt;
    &lt;div data-youtube data-youtube-id=&quot;c9psfOxJysw&quot; <strong>data-autoplay data-loop data-mute data-no-controls</strong>&lt;/div&gt;
  &lt;/div&gt;
<strong>&lt;/section&gt;</strong>
</pre>
            <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="fullscreen bg-blue">
          <!-- Fullscreen Video -->
          <div class="embed dark">
            <div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
          </div>
          <!-- .end .embed -->
          <div class="wrap aligncenter">
            <h2><strong>Overlay</strong></h2>
            <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="bg-primary">
          <span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span>
          <div class="wrap aligncenter">
            <h3>
              <svg class="fa-map">
                <use xlink:href="#fa-map"></use>
              </svg>
              Maps & Charts
            </h3>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="bg-black-blue">
          <div class="wrap size-50">
            <p class="text-context">Status of Net Neutrality around the world.</p>
            <div class="embed">
              <iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
            </div>
            <!-- .end .embed -->
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <div class="card-50 bg-white">
              <figure>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
                <figcaption>
                  <a href="https://maps.google.com" title="Google Maps">
                    <svg class="fa-map">
                      <use xlink:href="#fa-map"></use>
                    </svg>
                    Google Maps
                  </a>
                </figcaption>
              </figure>
              <!-- end figure-->
              <div class="flex-content">
                <h2>
                  Discover Seville
                </h2>
                <p>.card-50.bg-white</p>
                <ul class="description">
                  <li>
                    <strong class="text-label" title="Density">Density:</strong> 140/km<sup>2</sup>
                  </li>
                  <li><strong class="text-label" title="Population">Population:</strong> 703,021</li>
                  <li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li>
                </ul>
                <p>
                  There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies.
                </p>
              </div>
              <!-- end .flex-content-->
            </div>
            <!-- end .card-50-->
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="fullscreen">
          <div class="embed">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
          </div>
          <!-- .end .embed -->
        </section>
        <section>
          <div class="wrap size-60">
            <h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
            <!-- Responsive video/iframe/chart... Add <div class="embed"> -->
            <div class="embed">
              <!-- I love Quartz's charts -->
              <div class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div>
              <script src="https://www.theatlas.com/javascripts/atlas.js"></script>
            </div>
            <!-- end .embed -->
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="aligncenter">
          <!-- .wrap = container width: 90% -->
          <div class="wrap">
            <h2><strong>Start in seconds</strong></h2>
            <p class="text-intro">120+ prebuilt slides ready to use.</p>
            <p>
              <a href="https://webslides.tv/webslides-latest.zip" class="button ga-track" data-ga-text="Download WebSlides (last slide demos)" title="Download WebSlides">
                <svg class="fa-cloud-download">
                  <use xlink:href="#fa-cloud-download"></use>
                </svg>
                Free Download
              </a>
              <span class="try">
                <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
                  <svg class="fa-paypal">
                    <use xlink:href="#fa-paypal"></use>
                  </svg>
                  Pay what you want.
                </a>
              </span>
            </p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="bg-primary aligncenter">
          <h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2>
          <h3><a href="https://twitter.com/webslides" title="WebSlides on Twitter">@WebSlides</a></h3>
        </section>

      </article>
    </main>
    <!--main-->
    <!-- Required -->

    <script src="../static/js/webslides.js"></script>

    <script>
      window.ws = new WebSlides();
    </script>

    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
    <script defer src="../static/js/svg-icons.js"></script>

  </body>
</html>
